<template>
	<view class="container">
		<view class="content-container">
			<template v-if="activeTab === 'home'">
				<SolverHome />
			</template>
			<template v-if="activeTab === 'task'">
				<SolverTask />
			</template>
			<template v-if="activeTab === 'message'">
				<SolverMessage />
			</template>
			<template v-if="activeTab === 'my'">
				<SolverMy />
			</template>
		</view>
		<tabbar />
	</view>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import tabbar from '@/components/tabbar/tabbar.vue';
import { useSolverTabbarStore } from '@/store/modules/solver-tabbar';
import SolverHome from '@/pages/solver/home/index.vue';
import SolverTask from '@/pages/solver/task/index.vue';
import SolverMessage from '@/pages/solver/message/index.vue';
import SolverMy from '@/pages/solver/my/index.vue';

const tabbarStore = useSolverTabbarStore();

// 当前激活的tab
const activeTab = computed(() => {
	return tabbarStore.activeTab;
});
</script>

<style lang="scss" scoped>
.container {
	height: 100vh;
}
.content-container {
	width: 100%;
	height: calc(100% - 75px);
}
</style>
